const webpack = require('webpack')
const path = require('path')
const {NODE_ENV} = process.env
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {VueLoaderPlugin} = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
    entry:path.resolve(__dirname,'./src/main.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        publicPath:NODE_ENV === 'development' ? '/' : './',
        filename:'js/[name].[hash:8].js',
        chunkFilename:'js/[name].[hash:8].js',
        assetModuleFilename:'image/[name].[hash:8][ext]'
    },
    resolve:{
        alias:{
            "@":path.join(__dirname,'./src')
        }
    },
    module:{
        rules:[
            {
                test:/\.(sass|scss)$/i,
                exclude:/node_modules/,
                use:[
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            esModule:false,
                            publicPath:'../'
                        }
                    },
                    {
                        loader:'css-loader'
                    },
                    {
                        loader:'sass-loader'
                    },
                    {
                        loader:'postcss-loader'
                    }
                ]
            },
            {
                test:/\.js$/i,
                exclude:/node_modules/,
                use:[
                    {loader:'babel-loader'}
                ]
            },
            {
                test:/\.(png|jpg|jpeg|webp|gif)$/i,
                type:'asset',
                parser:{
                    dataUrlCondition:{
                        maxSize:1024
                    }
                },
                // use:[
                //     {loader:'image-webpack-loader'}
                // ]
            },
            {
                test:/\.vue$/i,
                use:[{loader:'vue-loader'}]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'./public/index.html')
        }),
        new MiniCssExtractPlugin({
            filename:'css/[name].[hash:8].css'
        }),
        new webpack.DefinePlugin({
            "process.env":{
                "NODE_ENV":JSON.stringify(NODE_ENV),
                "BASE_URL":JSON.stringify('#/app')
            }
        }),
        new VueLoaderPlugin(),
        new CopyWebpackPlugin({
            patterns:[
                {
                    from:path.resolve(__dirname,'./public/favicon.ico'),
                    to:path.resolve(__dirname,'./dist/favicon.ico')
                }
            ]
        })

    ]

}